<!-- 模版OP4-调拨作业
1. 无筛选项 只有重置和提交 页面默认有表头和列表
2. 2个列表默认有1条空数据。表头只有一条可编辑数据 而列表可以有多行，并且有新增行按钮
3. 重置按钮 把当前页数据清空 回到起始页
4. 提交成功之后将页面置灰 不可编辑；加蒙版不能编辑 跳转到详情页
-->
<template>
    <el-scrollbar>
      <el-tabs class="my-sub-tabs" type="border-card" v-model="activeTab">
        <el-tab-pane v-for="tab in tabs" :key="tab.label" :label="tab.label" :name="tab.name">
          <component
            :is="tab.component"
            :data="{ groupName: data.groupName, jobType: data.jobType, operType }"
            :key="data.jobType"
          ></component>
        </el-tab-pane>
      </el-tabs>
    </el-scrollbar>
  </template>
  
  <script lang="ts" setup>
  import { computed, defineProps, markRaw, onBeforeUnmount, reactive, ref } from 'vue'
  import List from './component/list/Index.vue'
  import TemplateOP4 from '@/template/detail/templateOP4/Index.vue'
  
  const comObj = reactive({
    list: markRaw(List),
    op4: markRaw(TemplateOP4)
  })
  
  //定义接收的props
  const props = defineProps({
    // 定义一个对象类型的 prop
    data: {
      type: Object,
      default: () => ({ groupName: '', jobType: '' })
    }
  })
  
  const jobType = computed(() => {
    return props.data.jobType
  })
  
  const tabs = ref([
    {
      name: 'list',
      label: '列表',
      component: comObj['list']
    }
  ])
  
  const operType = ref('')
  const activeTab = ref('list')
  //添加标签页
  const addTab = (info: any) => {
    const { label, data, value } = info
    operType.value = value
    const tabExists = tabs.value.some((tab) => tab.name === 'op4')
    if (!tabExists) {
      tabs.value.push({
        name: 'op4',
        label: label,
        component: comObj['op4']
      })
    }
    //更新激活的标签页
    activeTab.value = 'op4'
    //将当前行信息存储到sessionStorage
    // sessionStorage.setItem('WMS_OP3_ROW_DATA', JSON.stringify(data))
  }
  
  import eventBus from '@/libs/eventBus'
  // 启用侦听
  eventBus.on(`addOP4DetailTab-${jobType.value}`, addTab)
  // 在组件卸载之前移除侦听
  onBeforeUnmount(() => {
    eventBus.off(`addOP4DetailTab-${jobType.value}`, addTab)
  })
  </script>
  
  <!-- <style scoped lang="less">
  :deep(.my-sub-tabs .el-tabs__content) {
    height: calc(100vh - 180px);
    overflow-y: scroll;
  }
  </style> -->
  